<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <style>
        body {
            background-color: #F5F5F5;
            font-family: Arial, sans-serif;
            font-size: 16px;
            color: #333333;
            margin: 0;
            padding: 0;
        }

        h1 {
            margin-top: 50px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            color: #333333;
        }

        form {
            width: 400px;
            margin: 50px auto;
            background-color: #FFFFFF;
            border: 1px solid #CCCCCC;
            padding: 20px;
            border-radius: 10px;
        }

        label {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #CCCCCC;
            margin-bottom: 20px;
            box-sizing: border-box;
        }

        input[type="radio"] {
            display: inline-block;
            margin-right: 10px;
        }

        textarea {
            height: 150px;
        }

        button {
            background-color: #4CAF50;
            color: #FFFFFF;
            border: none;
            padding: 10px 20px;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #3E8E41;
        }

        .radio-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="rep">
        <h1>用户信息</h1>
        <div>
            <label for="nickname">昵称：</label>
            <input type="text" id="nickname" name="nickname" v-model="user.name" required>

            <div class="radio-group">
                <label for="gender">性别：</label>
                <input type="radio" id="male" name="gender" v-model="user.sex" value="1" required>
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" v-model="user.sex" value="0">
                <label for="female">女</label>
            </div>

            <label for="bio">个人简介：</label>
            <textarea id="bio" name="bio" v-model="user.explain"></textarea>

            <button type="button" @click="submitForm">保存</button>
        </div>
    </div>
</body>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../static/myplugs/js/plugs.js"></script>
<script src="../static/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css" charset="utf-8">


</html>